<template>
  <div class="print-screens">
    <div
      class="print-screens-wraper"
      :style="{
        minHeight: `${pageHeight * scale + 15}mm`,
        minWidth: `${pageWidth * scale + 20}mm`,
      }"
    >
      <div
        class="print-screens-container"
        :style="{
          height: `${pageHeight * scale}mm`,
          width: `${pageWidth * scale}mm`,
        }"
      >
        <div class="print-page-canvas" :style="canvasStyle">
          <div
            class="print-page-canvas__background"
            :style="backgroundStyle"
          ></div>
          <div
            :style="{
              backgroundSize: gridShow ? `${gridSize}pt ${gridSize}pt` : ``,
              backgroundImage: gridShow
                ? `linear-gradient(rgba(0,0,0,.1) 1pt,transparent 0),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 0)`
                : '',
            }"
            class="print-page-canvas__inner"
          >
            <!-- 页眉 -->
            <div
              v-if="!isPreview && pageConfig.isHeaderShow == '1'"
              class="print-page-header"
            >
              <div class="print-page-header-text">{{ $t('页眉线') }}</div>
            </div>
            <template v-if="pageConfig.isHeaderShow == '1' && (pageActive>0 || isPreview) && pageNum > 0 && headerComponents.length  > 0">
              <l-draggable
                v-for="item in headerComponents"
                v-show="item.config.display"
                :key="item.config.id"
                :index="item.config.id"
                :readonly="true"
                :scale="1 / scale"
                :width="item.config.width"
                :height="item.config.height"
                :left="item.config.left"
                :top="item.config.top"
                isPt
              >
                <component
                  :is="`${item.type}-print-view`"
                  :config="item.config"
                />
              </l-draggable>
            </template>
            <!-- 页脚 -->
            <div
              v-if="pageConfig.isFooterShow == '1' && pageNum > 0"
              class="print-page-footer"
              :style="{
                bottom:
                  pageConfig.footerBottomSize - pageConfig.paddingBottom + 'pt',
                textAlign: pageConfig.footerAlign,
              }"
            >
              {{ pageNumText }}
            </div>

            

            <l-draggable
              v-for="item in components"
              :key="item.config.id"
              :index="item.config.id"
              v-show="item.config.display"
              :readonly="isPreview"
              :scale="1 / scale"
              :width="item.config.width"
              :height="item.config.height"
              :left="item.config.left"
              :top="item.config.top"
              :activeFlag="activeComponentConfig.id == item.config.id"
              @focus="handleFocus"
              @blur="handleBlur"
              isPt
            >
              <component
                :is="`${item.type}-print-view`"
                :config="item.config"
              />
            </l-draggable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {pageNumText} from "../config/util"
import "../components/view";
export default {
  props: {
    components: {
      type: Array,
      default: () => {
        return [];
      },
    },
    headerComponents: {
      type: Array,
      default: () => {
        return [];
      },
    },
    activeComponent: {
      type: Object,
      default: () => ({}),
    },
    pageConfig: {
      type: Object,
      default: () => ({}),
    },
    scale: Number,
    pageHeight: Number,
    pageWidth: Number,
    gridShow: Boolean,
    gridSize: Number,
    pageActive: Number,
    pageNumbers: Number,

    isPreview: Boolean,
  },
  components: {},
  computed: {
    showWidth() {
      return (
        this.$mmToPt(this.pageWidth) -
        this.pageConfig.paddingLeft -
        this.pageConfig.paddingRight
      );
    },
    showHeight() {
      return (
        this.$mmToPt(this.pageHeight) -
        this.pageConfig.paddingTop -
        this.pageConfig.paddingBottom
      );
    },

    activeComponentConfig() {
      if (this.activeComponent && this.activeComponent.config) {
        return this.activeComponent.config;
      }
      return {};
    },

    canvasStyle() {
      const res = {
        height: `${this.pageHeight}mm`,
        width: `${this.pageWidth}mm`,
        "padding-top": `${this.pageConfig.paddingTop}pt`,
        "padding-left": `${this.pageConfig.paddingLeft}pt`,
        "padding-right": `${this.pageConfig.paddingRight}pt`,
        "padding-Bottom": `${this.pageConfig.paddingBottom}pt`,

        transform: `scale(${this.scale},${this.scale})`,
        border:
          this.pageConfig.borderShow != "1"
            ? ""
            : `${this.pageConfig.borderSize}pt ${this.pageConfig.borderLine} ${this.pageConfig.borderColor}`,
      };
      return res;
    },
    backgroundStyle() {
      const res = {
        backgroundColor:
          this.pageConfig.isBgColor != "1" ? "#fff" : this.pageConfig.bgColor,
        opacity: this.pageConfig.bgOpacity * 0.01,
        "background-image":
          this.pageConfig.isBgImg == "1" && this.pageConfig.bgImg
            ? `url(${this.apiUrl}system/annexesfile/${this.pageConfig.bgImg}?token=${this.token})`
            : "",
        "background-size":
          this.pageConfig.bgImgW + "pt " + this.pageConfig.bgImgH + "pt",
        "background-repeat":
          this.pageConfig.bgRepeat == "2" //"自适应铺满"
            ? ""
            : this.pageConfig.bgRepeat == "3" //水平重复
            ? "repeat-x"
            : "no-repeat",
        "background-position":
          this.pageConfig.originL + "pt" + " " + this.pageConfig.originT + "pt",
      };

      return res;
    },

    pageNum() {
      // 当前页码
      return this.pageActive + 2 - this.pageConfig.footerStart;
    },
    pageTotals() {
      return this.pageNumbers - this.pageConfig.footerStart + 1;
    },
    pageNumText() {
      return pageNumText(this.pageConfig.footerStyle,this.pageNum,this.pageTotals);
    },
  },
  data() {
    return {};
  },
  methods: {
    handleFocus({ index }) {
      if (this.isPreview) {
        return;
      }

      const activeComponent = this.components.find((t) => t.config.id == index);
      this.$emit("setActive", activeComponent);
    },
    handleBlur({ left, top, width, height }) {
      if (this.isPreview) {
        return;
      }

      this.$set(this.activeComponentConfig, "left", 1);
      this.$set(this.activeComponentConfig, "top", 1);
      this.$set(this.activeComponentConfig, "width", width);
      this.$set(this.activeComponentConfig, "height", height);

      this.$nextTick(() => {
        let clientWidth = this.showWidth;
        let clientHeight = this.showHeight;
        let _left = 0;
        let _top = 0;

        if (
          this.pageConfig.isHeaderShow == "1" &&
          this.activeComponentConfig.isHeader
        ) {
          _left = -this.pageConfig.paddingLeft;
          _top = -this.pageConfig.paddingTop;
          clientWidth +=
            this.pageConfig.paddingLeft + this.pageConfig.paddingRight;
          clientHeight += this.pageConfig.paddingTop;
        }

        if (left < _left) {
          left = _left;
        } else if (left > clientWidth - width) {
          left = clientWidth - width;
        }

        if (clientWidth < width) {
          width = clientWidth;
          left = _left;
        }

        if (top < _top) {
          top = _top;
        } else if (top > clientHeight - height) {
          top = clientHeight - height;
        }

        if (clientHeight < height) {
          height = clientHeight;
          top = _top;
        }

        this.$set(this.activeComponentConfig, "left", left);
        this.$set(this.activeComponentConfig, "top", top);
        this.$set(this.activeComponentConfig, "width", width);
        this.$set(this.activeComponentConfig, "height", height);
      });
    },
  },
};
</script>

<style lang="scss">
.print-screens {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;

  &-container {
    position: relative;
    margin: auto;
  }

  &-wraper {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    padding: 10mm;
    padding-bottom: 5mm;
  }

  .print-page-canvas {
    position: relative;
    transform-origin: 0 0;

    &__inner {
      width: 100%;
      height: 100%;
      position: relative;
    }
    &__background {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }
  }

  .print-page-header {
    position: absolute;
    width: 100%;
    height: 0;
    border-top: 1pt dashed rgb(206, 188, 188);
    top:0pt;
    left: 0;

    &-text {
      position: absolute;
      top: -13pt;
      width: 100%;
      text-align: right;
      font-size: 10pt;
      color: rgb(206, 188, 188);
    }
  }

  .print-page-footer {
    position: absolute;
    left: 0;
    width: 100%;
  }


  .l-draggable{
    padding: 0 !important;
  }
}
</style>
